<template>
  <el-card>
    <div class="search-input-group">
      <el-form :model="searchForm" :inline="true">
        <el-form-item style="padding:5px" label="商品编号">
          <el-input 
            v-model="searchForm.productNum" 
            placeholder="请输入商品编号" 
            clearable
          />
        </el-form-item>
        <el-form-item style="padding:5px" label="商品名称">
          <el-input 
            v-model="searchForm.productName" 
            placeholder="请输入商品名称" 
            clearable
          />
        </el-form-item>
        <el-form-item style="padding:5px" label="申请人">
          <el-input 
            v-model="searchForm.applicationId" 
            placeholder="请输入申请人ID" 
            clearable
          />
        </el-form-item>
        <el-form-item style="padding:5px" label="审核状态">
          <el-select v-model="searchForm.productStatus" placeholder="请选择审核状态" style="width: 150px;" clearable>
            <el-option label="待审核" :value="4" />
            <el-option label="已驳回" :value="5" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button @click="handleResetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <div class="btn-group">
      <el-button 
        v-if="btnGroup.editb" 
        type="success" 
        :icon="Edit"
        @click="showAuditDialog"
        :disabled="multipleSelection.length !== 1"
      >
        审核
      </el-button>
    </div>
    
    <el-table 
      :data="dataList" 
      style="width: 100%" 
      row-key="productId"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column type="selection" width="40" />
      <el-table-column type="index" label="序号" width="80" show-overflow-tooltip/>
      <el-table-column prop="productNum" label="商品编号" width="120" show-overflow-tooltip/>
      <el-table-column prop="productName" label="商品名" width="150" show-overflow-tooltip/>
      <el-table-column prop="applicationId" label="申请人" width="100" show-overflow-tooltip/>
      <el-table-column prop="productStatus" label="审核状态" width="100" show-overflow-tooltip>
        <template #default="scope">
          <el-text v-text="getStatusText(scope.row.productStatus)"></el-text>
        </template>
      </el-table-column>
      <el-table-column prop="auditDesc" label="审核描述" width="150" show-overflow-tooltip/>
      <el-table-column prop="tpsCreateTime" label="申请日期" show-overflow-tooltip/>
      <el-table-column prop="tpsUpdataTime" label="更新日期"show-overflow-tooltip/>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      :page-sizes="[10, 20, 50]"
      layout="total, sizes, prev, pager, next"
      background
      @current-change="handleCurrentChange"
      class="pagination"
    />
  </el-card>
  
  <!-- 商品审核对话框 -->
  <el-dialog
    title="商品审核"
    v-model="auditDialogVisible"
    width="700px"
  >
    <el-form
      :model="auditData"
      label-width="120px"
      label-position="left"
      disabled
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品编号:">
            <span>{{ auditData.productNum }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品名称:">
            <span>{{ auditData.productName }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row>
        <el-col :span="12">
          <el-form-item label="申请人:">
            <span>{{ auditData.applicationId }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审核状态:">
            <span>{{ getStatusText(auditData.productStatus) }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row>
        <el-col :span="12">
          <el-form-item label="价格:">
            <span>{{ auditData.productPrice }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="破损程度:">
            <span>{{ getOldLevelText(auditData.productOld) }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品类型:">
            <span>{{ auditData.productType }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="卖家编号:">
            <span>{{ auditData.sellerId }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row>
        <el-col :span="24">
          <el-form-item label="适用人群:">
            <span>{{ auditData.applicablePeople }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row>
        <el-col :span="12">
          <el-form-item label="交易地址:">
            <span>{{ auditData.productLocation }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间:">
            <span>{{ auditData.tpCreateTime }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row>
        <el-col :span="12">
          <el-form-item label="更新时间:">
            <span>{{ auditData.tpUpdataTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据版本:">
            <span>{{ auditData.tpsDataVersion }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item label="商品描述:">
        <span>{{ auditData.productDesc }}</span>
      </el-form-item>
      
      <el-form-item label="商品图片:">
        <el-image
          v-if="auditData.productImage"
          :src="auditData.productImage"
          style="width: 200px; height: 200px"
          fit="cover"
          :preview-src-list="[auditData.productImage]"
        />
        <span v-else>暂无图片</span>
      </el-form-item>
    </el-form>
    
    <el-form
      :model="auditForm"
      :rules="auditFormRules"
      ref="auditFormRef"
      label-width="120px"
      style="margin-top: 20px;"
    >
      <el-form-item label="审核描述" prop="auditDesc">
        <el-input 
          v-model="auditForm.auditDesc" 
          type="textarea"
          placeholder="请输入审核描述"
          :rows="4"
        />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="auditDialogVisible = false">取消</el-button>
        <el-button type="success" @click="submitAudit(1)">通过</el-button>
        <el-button type="danger" @click="submitAudit(5)">驳回</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {
    Edit,
    Search
} from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from "vue"
import { getSearchList, audit } from "@/api/admin/prodAudit"
import { getProductOldLevelText as getOldLevelText, getProductStatusText as getStatusText } from '@/utils/DataTextMap'

// 模糊查询商品信息
const searchForm = reactive({
  productNum: '',
  productName: '',
  applicationId: '',
  productStatus: 4
})

// 固定参数源 ---start---
const dataList = ref([])
const multipleSelection = ref([])
const isSearch = ref(false)
const btnGroup = reactive({
    editb: true
})
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 获取商品列表数据
const getDataList = () => {
  let res = getSearchList({...searchForm},pagination.currentPage)
  res.then(res=>{
    dataList.value=res.data.records
    let opeStr=res.operateStr
    if(opeStr.includes("*")||opeStr.includes("u")) btnGroup.editb=true
    pagination.total=res.data.total
    pagination.pageSize=res.data.size
    pagination.currentPage=res.data.current
  })
}

// 搜索商品数据
const handleSearch = () => {
  isSearch.value = true
  let res=getSearchList({...searchForm},pagination.currentPage)
  res.then(res=>{ 
    dataList.value=res.data.records
    pagination.total=res.data.total
    pagination.pageSize=res.data.size
    pagination.currentPage=res.data.current
  })
}

const handleResetSearch = () => {
  searchForm.productNum = ""
  searchForm.productName = ""
  searchForm.applicationId = ""
  searchForm.productStatus = ""
  isSearch.value = false
  getDataList()
}

const handleSelectionChange = (selection) => {
  multipleSelection.value = selection
}

// 当前页改变时触发
const handleCurrentChange = (val) => {
  pagination.currentPage = val
  refreshList()
}

const refreshList = () => {
  if (isSearch.value) handleSearch()
  else getDataList()
}
// --- end ---

// 审核对话框相关变量
const auditDialogVisible = ref(false)
const auditFormRef = ref(null)
const auditData = ref({})

// 审核表单
const auditForm = reactive({
  auditDesc: ''
})

// 审核表单验证规则
const auditFormRules = {
  auditDesc: [
    { required: true, message: '请输入审核描述', trigger: 'blur' }
  ]
}

// 显示审核对话框的方法
const showAuditDialog = () => {
  if (multipleSelection.value.length === 1) {
    auditData.value = { ...multipleSelection.value[0] }
    auditForm.auditDesc = ''
    auditDialogVisible.value = true
  }
}

// 提交审核
const submitAudit = async(status) => {
  // 如果是审核通过(状态码1)，自动填写审核描述
  let auditDesc = auditForm.auditDesc
  if (status === 1) {
    auditDesc = "审核通过"
  }
  
  // 驳回时需要验证审核描述
  if (status === 5 && !auditForm.auditDesc.trim()) {
    auditFormRef.value.validateField('auditDesc')
    return
  }
  
  const auditParams = {
    productNum: auditData.value.productNum,
    tpsDataVersion: auditData.value.tpsDataVersion,
    productStatus: status,
    auditDesc: auditDesc
  }
  
  console.log('审核参数:', auditParams)
  // 调用实际的审核API
  await audit(auditParams);
  auditDialogVisible.value = false
  refreshList()
}

onMounted(() => {
    getDataList()
})
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.btn-group {
  margin-bottom: 15px;
}

.btn-group .el-button {
  margin-right: 1px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.search-input-group {
  margin-bottom: 15px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.search-input-group .el-form-item {
  margin-bottom: 0;
  margin-right: 15px;
}
</style>